<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>console.log('短信登录')</script>
    <script src="./a.js"></script>
</head>
<style>
    .a{
        display: flex;
        width: 700px;
        height: 500px;
        background: antiquewhite;
        border-radius:5px;
        border: 1px solid rgb(0, 0, 0,0.5);
        justify-content: center;
        align-items: centers;
        margin:auto;
        margin-top: 100px;
        flex-direction:column;
    }
    .b{
        display: flex;
        width: 100%;
        height: 70%;
        background-color: antiquewhite;
        justify-content: space-around;
    }
    .b1{
        width: 40%;
        height: 100%;
        background-color: antiquewhite;
        }
        .b2{
            width: 60%;
            height: 100%;
            background-color: antiquewhite;
        }
        .b3{
            font-size: 20px;
            padding-top: 10%;
            padding-left: 25%;
        }
        .b4{
            width: 60%;
            height: 50%;
            padding-left: 20%;
            padding-top: 10%;
        }
        .b5{
            width:70%;
            height: 20%;
            padding-left: 25%;
        }
        .b6{
            font-size: 13px;
        }
        .b7{
            font-size: 13px;
            color: aqua;
        }
    .c{
        display: flex;
        width: 100%;
        height: 30%;
        background-color: antiquewhite;
        justify-content: space-between;
    }
    .c1{
        display: flex;
        width:60%;
        height: 20%;
        font-size: 20px;
        margin: auto;
        padding-top: 7%;
        justify-content: space-around;
    }
    .d{
        width: 60%;
        height: 20%;
        margin: auto;
        border-radius:5px;
        border: 1px solid rgb(0, 0, 0,0.5);
    }
    .d1{
        display: flex;
        justify-content: left;
        align-items: center;
        padding-bottom: 4%;
        padding-left: 10px;
    }
    .d2{
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 2%;
        padding-left: 5px;
    }
    .d3{
        width: 45%;
        height: 40%;
        background-color: transparent;
        border: 2px solid transparent;
        padding-top: 1%;
    }
    .d4{
        width: 10%;
        height: 10%;
    }
    .d5{
        font-size: 13px;
        color: rgb(0, 255, 255,0.5);
    }
    .d6{
        color: rgb(0, 255, 255,0.5);
    }
    .e{
        display: flex;
        width: 50%;
        height: 20%;
        padding-top: 5%;
        margin: auto;
        justify-content: space-around;
    }
    .e1{
        width: 40%;
        height: 40%;
        text-align: center;
        border-radius:5px;
        border: 1px solid rgb(0, 0, 0,0.5);
    }
    .e2{
        width: 40%;
        height: 40%;
        text-align: center;
        color: aliceblue;
        background-color: rgb(0, 255, 255,0.9);
        border-radius:5px;
        border: 1px solid rgb(0, 0, 0,0.5);
    }
    .e3{
        color: rgb(0, 0, 0,0.5);
        text-align: center;
    }
    .f{
        display: flex;
        width: 70%;
        height: 20%;
        margin: auto;
        justify-content: center;
        justify-content: space-around;
    }
    .f1{
        width: 10%;
        height: 50%;
    }
    .f2{
        color: rgb(0, 0, 0,0.5);
        padding-top: 1%;
    }
    .g1{
        width: 20%;
        height: 100%;
    }
    .g2{
        width: 20%;
        height: 100%;
    }
    .g3{
        width: 60%;
        height: 40%;
        margin: auto;
        color:rgb(0, 0, 0,0.5);
        padding-left: 4%;
    }
    .g4{
        color: aqua;
    }
</style>
<body>
    <div class="a">
        <div class="b">
            <div class="b1">
                <div class="b3">扫描二维码登录</div>
                <img src="./下载.png" alt="二维码过期" class="b4">
                <div class="b5">
                    <mash class="b6">请使用</mash>
                    <mash class="b7">哔哩哔哩客户端</mash>
                    <div class="b6">扫码登录或扫码下载APP</div>
                </div>
            </div>
            <div class="b2">
                <div class="c1">
                    <mash class="d6">密码登录</mash>
                    <mash>短信登录</mash>
                </div>
                <div class="d">
                    <div class="d1">
                        <mash>账号</mash>
                        <input type="text" class="d3" placeholder="请输入账号" value=""/>
                    </div>
                    <div style="border-top: 1px solid rgb(0, 0, 0,0.5);" class="d2">
                        <mash>密码</mash>
                        <input type="text" class="d3" placeholder="请输入密码" value="" />
                        <img src="./眼.jpeg" alt=""  class="d4">
                        <div class="d5">忘记密码？</div>
                    </div>
                </div>
                <div class="e">
                    <mash class="e1">注册</mash>
                    <mash class="e2">登录</mash>
                </div>
                <div class="e3">其他登录方式</div>
                <div class="f">
                    <img src="./微信.png" class="f1">
                    <div class="f2">微信登录</div>
                    <img src="./微博.png" class="f1">
                    <div class="f2">微博登录</div>
                    <img src="./QQ.jpeg" class="f1">
                    <div class="f2">QQ登录</div>
                </div>
            </div>
        </div>
        <div class="c">
            <img src="./左.png" class="g1">
            <div class="g3">
                <div>未注册过哔哩哔哩的手机号，我们将自动帮你注册账号</div>
                <mash>登录或完成注册即代表你同意</mash>
                <mash class="g4">用户协议</mash>
                <mash>和</mash>
                <mash class="g4">隐私政策</mash>
            </div>
            <img src="./右.png" class="g2">
        </div>
    </div>
</body>
</html>